<template>
   <div class="dialog-container">
       <slot name="header">
          <div class="header-default">
             <div>标题</div>
             <div>&times;</div>
          </div>
       </slot>
       <slot>
           <div class="body-main">
              这里是模态框的主体容
           </div>
       </slot>
       <slot name="footer"></slot>
   </div>
</template>

<script>
export default {

}
</script>

<style lang="scss">
    .dialog-container{
        position:absolute;
        // width: 300px;
        border: 1px solid #000;
        padding: 10px;
        
        .header-default{
            display: flex;
            justify-content: space-between;
            padding: 5px 10px;
            background: skyblue;
        }
        .body-main{
            padding: 10px;
        }
    }
</style>